<template>
    <div>
        <fieldset>
            <legend>shallowReactive</legend>
            {{ state1 }}
            <van-button @click="changeName1">修改name</van-button>
            <van-button @click="changeColor1">修改color</van-button>
        </fieldset>

        <fieldset>
            <legend>shallowRef</legend>
            {{ state2 }}
            <van-button @click="changeName2">修改name</van-button>
            <van-button @click="changeColor2">修改color</van-button>
        </fieldset>

        <fieldset>
            <legend>shallowRef</legend>
            {{ state3 }}
            <van-button @click="changeName3">修改name</van-button>
        </fieldset>
    </div>
</template>

<script lang="ts">
import { defineComponent, shallowReactive, shallowRef } from "vue";

export default defineComponent({
    setup() {
        const state1 = shallowReactive({ name: "zs", car: { color: "red" } });
        const changeName1 = () => {
            state1.name += "==";
        };
        const changeColor1 = () => {
            state1.car.color += "==";
        };

        
        const state2 = shallowRef({ name: "zs", car: { color: "red" } });
        const changeName2 = () => {
            state2.value.name += "==";
        };
        const changeColor2 = () => {
            state2.value.car.color += "==";
        };

        const state3 = shallowRef("zs")
        const changeName3 = ()=>{
            state3.value += "=="
        }
        return { state1, changeName1, changeColor1, state2, changeName2, changeColor2,state3,changeName3 };
    },
});
</script>

<style scoped></style>
